<template>
    <vxe-table-colgroup :field="column.prop" :title="column.label" :key="column.prop"
                        :type="column.type" :align="column.align" :header-align="column.headerAlign"
                        :width="column.width"
                        :resizable="column.resizable" :class-name="column.className"
                        :show-overflow="column.tooltip===undefined?true:column.tooltip"
                        :render-header="column.renderHeader" :min-width="column.minWidth||50"
                        :fixed="column.fixed" :filters="column.filters" :filter-method="column.filterMethod"
                        :label-class-name="column.labelClassName"
                        :edit-render="column.editRender"
                        :cell-render="column.cellRender"
                        :params="column">
        <template v-for="(child, cIndex) in column.children">
            <base-vxe-table-children-column v-if="child.children && child.children.length > 0"
                                            :key="cIndex" :index="cIndex" :col="child" :edit="edit" />
            <template v-else>
                <template v-if="child.render || child.renderHeader || child.formatter || child.elComp">
                    <base-vxe-table-column-render :key="cIndex" :index="cIndex" :col="child" :edit="edit" />
                </template>
                <template v-else>
                    <base-vxe-table-column :key="cIndex" :index="cIndex" :col="child" :edit="edit" />
                </template>
            </template>
        </template>
    </vxe-table-colgroup>
</template>

<script>
import BaseVxeTableColumn from "./BaseVxeTableColumn";
import BaseVxeTableColumnRender from "./BaseVxeTableColumnRender";

export default {
    name: "BaseVxeTableChildrenColumn",
    components: { BaseVxeTableColumn, BaseVxeTableColumnRender },
    props: {
        col: {
            type: Object,
            default() {
                return {};
            },
        },
        index: {
            type: Number,
            default() {
                return -1;
            },
        },
        edit: {
            type: Boolean,
            default() {
                return true;
            },
        },
    },
    data() {
        return {
            column: {},
        };
    },
    watch: {
        col: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            this.column = $.extend({}, this.col);
            if (typeof this.column.label === 'number') {
                this.column = $.extend({}, this.column, {
                    label: String(this.column.label),
                });
            }
        },
    },
}
</script>

<style scoped>

</style>
